<template>
	<div id="cartcount">
		<span class="cart-add icon-add_circle" @click.stop.prevent="addCart(food)"></span>
		<span class="cart_count" v-show="food.count>0">{{food.count}}</span>
		<span class="icon-remove_circle_outline cart_move" @click.stop.prevent="romveCart(food)" v-show="food.count>0"></span>
	</div>
</template>

<script>
	import Vue from 'vue';
	export default {
		name: "cartcount",
		props:{
			food:{
				type:Object
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			/*添加食物数量*/
			addCart(food) {
				if(!food.count) {
					Vue.set(food, 'count', 1); //给请求的数据上添加属性count
				} else {
					food.count++
				}
			},
			romveCart(food) {
				food.count--
//				 this.$emit('fromChild', food)
			}
		},
		computed:{
		}

	}
</script>

<style scoped="scoped">
.cart-add{
	color: #00A0DC;float: right;
	font-size: 18px;
	vertical-align: top;
}
.cart_count{
	float: right;
	vertical-align: top;
	font-size: 15px;
	padding: 3px 4px 0;
}
.cart_move{
	color: #00A0DC;
	float: right;
	font-size: 18px;
	vertical-align: top;
}
</style>